<template>
  <div class="container" ref="containerRef">
    <div class="list">
      <div class="item">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ICardItem } from './type.ts';
const dataState = reactive({
  loading: false, // 发送请求 loading 状态
  isFinish: false, // 请求数据是否已经结束（返回空数据）
  currentPage: 1, // 当前页数
  list: [] as ICardItem[], // 数据源
});

const containerRef = ref<HTMLDivElement | null>(null);
const scrollState = reactive({
  viewWidth: 0,
  viewHeight: 0,
  start: 0
});
const end = computed(() => scrollState.viewHeight + scrollState.start);

</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  .list {
    width: 100%;
    position: relative;
    .item {
      position: absolute;
    }
  }
}
</style>
